<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="js/react.development.js"></script>
    <script type="text/javascript" src="js/react-dom.development.js"></script>
    <script type="text/javascript" src="js/babel.min.js"></script>
</head>
<body>
    <div id="root">
    
    </div>
    <script type="text/babel">
        class Myform extends React.Component{
            fnHello() {
                console.log(this);// 这里的this指的是类组件实例
                alert('hello,'+this.props.name);
            }

            // 箭头函数等号前后不要有空格
            fnHello1 = ()=>{
                console.log(this);
                alert('hello,'+this.props.name);
            }

            fnHello2 = (intro)=>{
                alert('hello,'+intro)
            }

            render() {
                return (
                    <div>
                        <input type="button" onClick={this.fnHello1} value="打招呼1"/>    
                        {/*传参的函数必须得在外面包一层箭头函数，否则会直接执行函数*/}
                        {/*<input type="button" onClick={this.fnHello2('wwj')} value="打招呼2"/>    错误示范！*/}
                        <input type="button" onClick={()=>{this.fnHello2('wwj')}} value="打招呼2"/>    
                        <input type="button" onClick={()=>this.fnHello2('wwj')} value="打招呼2可省略大括号"/>    
                    </div>
                )
            }
        }
        ReactDOM.render(<Myform name='mary'/>, document.getElementById('root'));
    </script>
</body>
</html>